@import "base.scss";
@import "mixin.scss";

//commmon CSS
html, body, button, select, textarea, input {
    line-height: $lineHeight;
}

// SY-content
.SY-content {
    .wrap {
        padding-bottom: 10 * $fontSize10;
    }
    .helpNav {
        width: 22 * $fontSize10;
        background: $colorfff;
    }
    .helpList {
        .item {
            border-bottom: 1px solid #eee;
            &:last-child {
                border-bottom: none;
            }
            &.active {
                > a {
                    color: $theme;
                    font-weight: 700;
                    border-left: $fontSize10 / 5 solid $theme;
                }
            }
            > a {
                display: block;
                height: 6 * $fontSize10;
                line-height: 6 * $fontSize10;
                font-size: $fontSize16;
                padding:0 $fontSize20;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                word-break: break-all;
                word-wrap: break-word;
                @include link-colors(rgba(0,0,0,0),$theme);
                @include link-posColor(rgba(0,0,0,0),#eee);
            }
            ul {
                display: none;
            }
        }
        .offspringItem {
            height: 4 * $fontSize10;
            line-height: 4 * $fontSize10;
            font-size: $fontSize14 + 1;
            &:hover {
                a {
                    color: $theme;
                }
            }
            &.active {
                a {
                    color: $theme;
                    background: #f5f7f9;
                }
            }
            a {
                display: block;
	            padding:0 $fontSize20;
	            white-space: nowrap;
	            overflow: hidden;
	            text-overflow: ellipsis;
	            word-break: break-all;
	            word-wrap: break-word;
            }
        }
    }
    .helpContent {
        width: 95 * $fontSize10;
        background: $colorfff;
    }
    .helpDetail {
        .leader {
            height: 4 * $fontSize12;
            line-height: 4 * $fontSize12;
            font-size: $fontSize14;
            margin:2 * $fontSize18 5 * $fontSize10 0;
            border-bottom: 1px solid #eee;
            .fl {
                cursor: default;
            }
            a i {
                color: #2b333b;
            }
            .fr:hover {
                color: $theme;
            }
        }
        .contentList {
            min-height: 60 * $fontSize10;
            margin:$fontSize12 + 1 5 * $fontSize10 5 * $fontSize10;
            .item {
                padding: $fontSize10 $fontSize20;
                border-bottom: 1px solid #eee;
                .title {
                    margin-bottom: $fontSize10;
                    a {
                        font-size: $fontSize16;
                        color: $color444;
                    }
                }
                .checkMore {
                    margin-top: $fontSize12 / 2;
                    a {
                        font-size: $fontSize14;
                        @include link-colors($color444,$theme);
                    }
                }
                .text {
                    font-size: $fontSize14;
                    color: #777;
                    max-height: 5 * $fontSize10 + 2;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    word-break: break-all;
                    word-wrap: break-word;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                }
            }
        }
    }
}
.elmentFixed {
	position: fixed;
	top: 5 * $fontSize10;
}
